import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/portal/widgets/responsive-widget.dart';
import 'package:imperius_insights/treaty/dimensions.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/styles.dart';
import 'view_model.dart';
import 'widgets/menu/sidebar_menu.dart';

const LANDSCAPE_MIN_SUPPORT_WIDTH = 1280;
const LANDSCAPE_MIN_SUPPORT_HEIGHT = 800;

class Screen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    return ViewModel();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
//      if (constraints.maxWidth < 800 || constraints.maxHeight < 480) {
//        return Center(
//          child: Text('窗口尺寸过小，请调大至HD/FHD/QHD或更高规格以获得完整体验'),
//        );
//      }
      final isLandscape = ResponsiveWidget.isLandscape(context);
      return isLandscape ? buildViewLandscape() : buildViewPortrait();
    });
  }

  Widget buildContent(_) {
    return Expanded(
      child: Observer(
          builder: (context) {
            return viewModel.currentMenu.routeCreator(context);
          }
      ),
    );
  }

  buildViewLandscape() {
    return Material(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[SideBarMenu(viewModel), buildContent(context)],
        ));
  }

  buildViewPortrait() {
    return Scaffold(
      body: Observer(
          builder: (_) => IndexedStack(
            index: viewModel.currentIndex,
            children: [0, 1, 2, 3, 4].map((i) => viewModel.menuItems[i].routeCreator(context)).toList(),
          )),
      bottomNavigationBar: Observer(
          builder: (_) => CupertinoTabBar(
            backgroundColor: palette.tabBarBackground,
            activeColor: palette.theme,
            iconSize: fontDimensions.tabBarIconSize,
            inactiveColor: palette.tabBarForegroundInActive,
            items: [0, 1, 2, 3, 4].map((i) => BottomNavigationBarItem(
                title: Text(viewModel.menuItems[i].title, style: styles.tabBar),
                icon: Icon(viewModel.menuItems[i].icon)),
            ).toList(),
            currentIndex: viewModel.currentIndex,
            onTap: viewModel.onTapTab,
          )),
    );
  }
}
